@import "../mixin.styl"

.page.page-index
    .bg
        absolute(0, 0, auto, 0)
        height 1070px
        background #000 url(../img/index-bg.jpg) no-repeat center top
        background-size cover

    .slogan-1, .slogan-2
        text-align center
        color #fff

    .slogan-1
        padding-top 222px
        font-size 64px
        letter-spacing 4px

    .slogan-2
        padding-top 26px
        font-size 18px
        letter-spacing 2px
        font-weight 300

    .white-pane
        position relative
        width 1320px
        margin 288px auto 0 auto
        background #fff
        border-radius 4px
        padding-top 1px
        padding-bottom 100px

    .kechengzu-show
        absolute(-123px, 0, auto, 0)
        width mainContentWidth
        height 368px
        margin 0 auto
        box-shadow 0 2px 29px cBoxShadow
        border-radius 4px

        .more
            display block
            absolute(-36px, 0, auto, auto)
            color #fff
            font-size 14px
            letter-spacing 2px
            text-decoration none

    .main-lesson-list
        width 100%
        height 100%
        position relative
        overflow hidden
        border-radius 4px

        .current-indicator
            absolute(auto, auto, 16px, 150px)
            z-index 100
            text-align center

            .indicator
                display inline-block
                width 6px
                height 6px
                margin 0 6px
                border-radius 3px
                background rgba(#ccc, .6)
                box-shadow 0 0 4px #555

                &.current
                    background #fff

    .main-lesson
        absolute(0, 0, 0, 0)
        width 100%
        height 100%
        overflow hidden
        background #fff no-repeat left center
        background-size 400px 100%
        background-image url(../../img/demo/d1.jpg)

        .content-box
            padding-left 460px

        .lesson-name
            padding-top 54px
            color cText
            font-size 24px
            letter-spacing 2px
            textOverflow()

        .lesson-tags
            padding 18px 40px 0 0
            height 60px
            overflow hidden

        .lesson-tag
            display inline-block
            color #fff
            background cFill
            padding 0 10px
            hh(22px)
            border-radius 11px
            margin 0 8px 8px 0
            font-size 12px
            max-width 120px
            textOverflow()

        .lesson-info
            font-size 12px
            color cText
            padding-top 25px

        .lesson-intro
            font-size 12px
            color cText
            padding-top 10px
            width 500px
            height 64px
            line-height 22px
            overflow hidden

        .join-lesson
            margin-top 30px
            width 180px

    .xi
        width 868px
        margin 400px auto 100px auto
        font-size 22px
        color cText
        line-height 1.6em
        letter-spacing 2px
        text-align justify

        .hua
            position relative

        .icon-shuangyinhaozuo
            display block
            absolute(-8px, auto, auto, -30px)

        .icon-shuangyinhaoyou
            display block
            absolute(auto, -30px, 5px, auto)

    .lesson-by-type
        padding-top 120px

        .type-info
            display inline-block
            width 153px
            vertical-align top

            .type-name
                color cText
                font-size 24px
                margin-top 40px
                margin-bottom 18px

            .type-intro
                color cText
                height 60px
                line-height 20px
                font-size 12px

            .more-lesson
                display block
                margin-top 50px
                text-decoration none
                color cText
                font-size 12px
        
        .type-lesson-list
            display inline-block
            vertical-align top

        .lesson
            position relative
            display inline-block
            width 214px
            height 300px
            background #fff
            margin 0 17px
            box-shadow 0 2px 29px cBoxShadow
            text-decoration none
            border-radius 4px
            overflow hidden

            &:hover
                box-shadow 2px 4px 10px cBoxShadow

            .cover
                display block
                width 100%
                height 153px

            .level
                absolute(124px, 16px, auto, auto)
                font-size 12px
                color #fff
                text-shadow 0 2px 4px rgba(#000, .5)

            .lesson-name
                margin-top 13px
                padding 0 12px
                font-size 14px
                color #000
                hh(20px)
                textOverflow()

            .lesson-tags
                margin-top 12px
                padding 0 12px
                height 50px
                overflow hidden

                .lesson-tag
                    display inline-block
                    font-size 12px
                    color #fff
                    background cFill
                    padding 0 10px
                    margin-left 5px
                    hh(22px)
                    border-radius 11px
                    textOverflow()
                    max-width 120px

            .lesson-author
                font-size 12px
                color cWeakText
                padding 12px 12px
                height 16px
                textOverflow()

body.for-index
    background #000

    .site-header
        background transparent
        box-shadow none

        &.dark
            background #000

        .logo
            background-image url(../img/logo.png)

        .site-name
            color #fff
        .menu
            color #fff

